<template>
    <p class="top">
        <span><input type="checkbox" id="all" v-model="selectall"><label for="all">全选</label></span>
        <span><input type="button" value="反选" @click="onback"></span>
    </p>
    <ul>
        <li v-for="(item,index) in Objlist" class="node" 
        :key="index" @click="item.bol=!item.bol">
            <input type="checkbox" :id="index" v-model="item.bol">
            <label :class="{besect:item.bol}" :for="index">{{item.name}}</label>
        </li>
    </ul>
</template>

<script setup>
    import { ref,computed} from 'vue';
    let Objlist=ref([
        {id:1,name:"艾尔登法环",bol:false},
        {id:2,name:"塞尔达传说",bol:false},
        {id:3,name:"宇宙机器人",bol:false},
        {id:4,name:"科技与魔法",bol:false},
    ]);
    let selectall=computed({
        get()
        {
            console.log("hello,world")
            return Objlist.value.every(item=>item.bol)
        },
        set(val)
        {
            console.log("HELLO,WORLD")
            Objlist.value.forEach(element => 
                element.bol=val
            );
        }
    })
    let onback=()=>
    {
        Objlist.value.forEach(element=>{
            element.bol=!element.bol
        })
    }
</script>

<style>
    .node{
        height: 25%;
    }
    .besect{
        color: grey;
        text-decoration: line-through;
    }
    *{
        margin: 0px;
        padding: 0px;
    }
    ul {
        list-style: none;
        height: 80%;
    }
    li{
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid grey;
    }
    li:hover{
        background-color: red;
    }
    #app{
        width: 300px;
        height: 300px;
        background-color: #5cb3cc;
        margin: 100px auto;
        padding: 20px;
        box-sizing: border-box;
        .top{
            height: 20%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-sizing: border-box;
            border-bottom: grey solid 1px;
        }
    }
</style>